<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
    <!-- 水库 -->
    <div class="top">
        <div class="raining">
            <p>水泵</p>
        </div>
        <div class="box_blocks">
            <div v-for="(item, index) in boxBlockData" :key="index" class="box_block" @click="box_blockClick(item)" :style="{
              'background':
                boxBlockActive === item.name
                  ? 'url(../../../../../../src/assets/images/home/Rectangle 46.png)'
                  : '',
            }">
                <div class="box_blockwrap">
                    <div class="tit">
                        <p :style="{
                    color: boxBlockActive === item.name ? '#fff' : '#ffffff8f',
                  }">
                            {{ item.name }}
                        </p>
                    </div>

                </div>
            </div>
        </div>

        <div class="level">
            <div class="level-content" v-for="(item, index) in List" :key="index">
                <div class="level-top">
                    <span>{{item.number}}</span>
                    <span>{{item.danwei}}</span>
                </div>
                <div class="shuiwei">{{item.shuiwei}}</div>
            </div>
        </div>

        <div class="qbox_blocks">
            <div v-for="(item, index) in qboxBlockData" :key="index" class="qbox_block" @click="qbox_blockClick(item)" :style="{
              background:
                qboxBlockActive === item.name
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }">
                <div class="qbox_blockwrap">
                    <div class="qtit">
                        <p :style="{
                    color: boxBlockActive === item.name ? '#fff' : '#ffffff8f',
                  }">
                            {{ item.name }}
                        </p>
                    </div>
                    <div class="qdata">
                        <p>
                            {{ item.data }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

         <div class="tubiao">
            <div id="blockchart" style="width:450px;height:170px; margin-left: 0px;border:1px solid red"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            // treeisshow: false,
            qboxBlockActive: '总蓄水位',
            qboxBlockData: [
                {
                    name: '总蓄水位',
                    data: '5467万m³',
                },
                {
                    name: '总日供水量',
                    data: '28m³',
                },
                {
                    name: '总占地面积',
                    data: '5630㎡',
                },
            ],
            // treeisshow: false,
            boxBlockActive: '一类水库',
            boxBlockData: [
                {
                    name: '一类水库',
                },
                {
                    name: '二类水库',
                },
            ],
            List: [
                {
                    number: '8',
                    // danwei: 'm',
                    shuiwei: '总数',
                },
                {
                    number: '32',
                    danwei: 'm',
                    shuiwei: '正常水位',
                },
                {
                    number: '60',
                    danwei: 'm',
                    shuiwei: '异常水位',
                },
            ],
           option : {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
      show:false,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
        axisLabel: {
            inside: false,
            textStyle: {
                color: '#fff',
                fontSize:'10',
                itemSize:''
                
            }
        },
     

      data: ['水质等级警戒', '超雨量等级警戒', '死水位等级', '防洪水位等级']
    }
  ],
  yAxis: [
    {
      type: 'value',
      interval:50,
      
    }
  ],
  series: [

    {
      name: '正常',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [80, 85, 80, 80]
    },

    {
      name: '超警戒',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [20, 15, 20, 20]
    },

 
 

 
  ]
},
        }
    },
    computed: {},
    watch: {},
    methods: {
        box_blockClick(val) {
            this.boxBlockActive = val.name
        },
        qbox_blockClick(val) {
            this.qboxBlockActive = val.name
        },
        showchart() {
            let myChart = echarts.init(document.getElementById('blockchart'))
            myChart.setOption(this.option)
        },
    },
    created() {},
    mounted() {
        this.showchart()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 430px;
    border: 1px solid red;
    .raining {
        width: 100%;
        height: 25px;
        // border: 1px solid red;
        background: url('../../../../../../src/assets/images/home/top.png') no-repeat center;
        background-size: 99% 100%;
        p {
            margin-left: 15px;
            font-family: OPPOSans;
            font-size: 18px;
        }
    }
    .box_blocks {
        margin: 10px 0;
        width: 50%;
        height: 30px;
        border: 1px solid red;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .box_block {
            width: 104px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            // background: ;
            mix-blend-mode: normal;
            // opacity: 0.6;
            border-radius: 4px;
            .box_blockwrap {
                cursor: pointer;
                background: url('../../../../../../src/assets/images/home/Rectangle 46.png') no-repeat bottom;
                // background-size: 100s% 100%;
                background-position: 20px 20px;
                //   border: 1px solid red;

                width: 104px;
                height: 30px;
                overflow: hidden;
                //   .tit {
                //     font-family: OPPOSans;
                //     font-style: normal;
                //     font-weight: normal;
                //     font-size: 18px;
                //     line-height: 24px;
                //     margin: 20px;
                //   }
            }
        }
    }
    .level {
        width: 80%;
        height: 60px;
        // border: 1px solid red;
        margin-top: -5px;
        display: flex;
        justify-content: space-between;
        .level-content {
            width: 25%;
            font-family: OPPOSans;

            .level-top {
                span:nth-child(1) {
                    font-size: 20px;
                    line-height: 32px;
                    margin-left: 14px;
                    font-family: OPPOSans;
                    font-size: 24px;
                    line-height: 32px;
                    color: #5bd9fe;
                }
                span:nth-child(2) {
                    font-size: 18px;
                    color: #e8effb;
                    opacity: 0.4;
                    margin-left: 2px;
                }
            }
            .shuiwei {
                font-size: 13.4px;
                line-height: 25px;
                letter-spacing: 0.6px;
                margin-left: 14px;
                color: #e8effb;
            }
        }
        .level-content:nth-child(1) {
            width: 20%;
        }
        .level-content:nth-child(4) {
            width: 22%;
            // text-align: right;
        }
    }
    .qbox_blocks {
        margin: 15px 0;
        width: 100%;
        height: 100px;
        // border:1px solid red;
        display: flex;
        justify-content: space-around;
        // align-items: center;
        .qbox_block {
            width: 125px;
            height: 110px;
        // border:1px solid red;

            // background: ;
            mix-blend-mode: normal;
            // opacity: 0.6;
            border-radius: 4px;
            .qbox_blockwrap {
                cursor: pointer;
                background: url('../../../../../assets/images/init/形状.png') no-repeat center/cover;
                width: 125px;
                height: 110px;
                // background-position: 0px -0px;
                overflow: hidden;
                .qtit {
                    font-family: OPPOSans;
                    font-style: normal;
                    font-weight: normal;
                    font-size: 17px;
                    line-height: 24px;
                    margin: 20px;
                }
                .qdata {
                    color: rgb(116, 243, 220);
                    font-family: BigYoungMediumGB2.0;
                    font-size: 18px;
                    line-height: 24px;
                    margin: 20px;
                }
            }
        }
    }
}
</style>
